<template>
	<view class="box">
		<view class="item" @click="putPassWord">
			<span>修改密码</span>
			<text>></text>
		</view>
		<!-- <view class="item">
			<span>允许下级查看店铺</span>
			<u-switch v-model="checked"></u-switch>
		</view> -->
		<view class="item" @click="actionClick(0)">
			<span>清除缓存</span>
			<text>></text>
		</view>
		<view class="item" @click="actionClick(3)">
			<span>隐私协议</span>
			<text>></text>
		</view>
		<view class="item" @click="actionClick(2)">
			<span>用户协议</span>
			<text>></text>
		</view>
		<view class="item" @click="actionClick(1)">
			<span>退出</span>
			<text>></text>
		</view>
		<view class="model" v-if="passWordShow">
			<view class="main">
				<view class="newPassWord">
					<view class="word">新密码</view>
					<view class="line">
						<input type="password" placeholder="请设置新密码" maxlength="20" v-model="setData" />
					</view>
				</view>
				<view class="newPassWord" style="margin-bottom: 50rpx;">
					<view class="word">确认新密码</view>
					<view class="line">
						<input type="password" placeholder="请确认新密码" maxlength="20" v-model="confirmData" />
					</view>
				</view>
				<view class="tips">
					<view>温馨提示</view>
					<view>1: 修改新密码后需要重新登入</view>
					<view>2: 新密码长度8-20位数字+子母+字符</view>
				</view>
				<view class="button">
					<u-button type="primary" size="medium" @click="submit(0)">取消</u-button>
					<u-button type="primary" size="medium" @click="submit(1)">保存</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" :show-title="false" :show-cancel-button="true" @confirm="confirm"
			@cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import {
		putPassWordApi
	} from "@/apis/mine.js"
	export default {
		data() {
			return {
				checked: true,
				passWordShow: false,
				show: false,
				content: '',
				clickData: -1,
				setData: '',
				confirmData: ''
			}
		},
		methods: {
			confirm() {
				if (this.clickData === 0) {
					uni.clearStorageSync();
					this.$refs.uToast.show({
						title: '缓存清除成功',
						type: 'success'
					})
				}
				if (this.clickData === 1) {
					uni.clearStorageSync();
					this.$refs.uToast.show({
						title: '退出登录成功',
						type: 'success'
					})
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			cancel() {
				if (this.clickData === 0) {
					console.log('缓存点击取消')
				}
				if (this.clickData === 1) {
					console.log('登录点击取消')
				}
			},
			putPassWord() {
				this.passWordShow = true;
			},
			regExp(val) {
				return function(str) {
					return val.test(str);
				}
			},
			submit(val) {
				if (val === 1) {
					if (this.setData === '') {
						this.$refs.uToast.show({
							title: '请输入新密码',
							type: 'error'
						})
						return;
					}

					if (this.confirmData === '') {
						this.$refs.uToast.show({
							title: '请确认新密码',
							type: 'error'
						})
						return;
					}
					const regExp = this.regExp(/^(?!.*[\u4e00-\u9fa5]).{6,20}$/);
					if (!regExp(this.setData)) {
						this.$refs.uToast.show({
							title: '请输入正确格式的密码格式',
							type: 'error'
						})
						return;
					}
					if (this.confirmData !== this.setData) {
						this.$refs.uToast.show({
							title: '两次密码不一致',
							type: 'error'
						})
						return;
					}

					// 发接口
					putPassWordApi(this.confirmData)
						.then(res => {
							if (res.code === 200) {
								this.$refs.uToast.show({
									title: '修改密码成功',
									type: 'success',
									url: '/pages/login/login'
								})
								this.confirmData = '';
								this.setData = '';
								uni.clearStorageSync();
								this.passWordShow = false;
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
				}else{
					this.passWordShow = false;
				}
				
			},
			actionClick(val) {
				//定义一个变量看最后取消和确认是点的哪个
				if (val === 0) {
					this.show = true;
					this.content = '您确定要清除缓存吗';
					this.clickData = 0
				};
				if (val === 1) {
					this.show = true;
					this.content = '您确定要退出吗';
					this.clickData = 1
				};
				if (val === 2) {
					// 用户协议
				    uni.navigateTo({
				    	url:"/pages/userAgree/userAgree"
				    })
				};
				if (val === 3) {
					// 用户协议
				    uni.navigateTo({
				    	url:"/pages/privacy/privacy"
				    })
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;

		.item {
			width: 100%;
			height: 100rpx;
			background-color: white;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EDEDED;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				color: #C1C1C1;
				font-size: 36rpx;
			}

			span {
				font-size: 25rpx;
			}
		}

		.model {
			width: 750rpx;
			height: 100vh;
			background-color: rgba(51, 51, 51, .3);
			position: fixed;
			z-index: 9;
			top: 0;
			left: 0;
			padding: 280rpx 42rpx 0 42rpx;
			box-sizing: border-box;

			.main {
				height: 600rpx;
				width: 100%;
				background-color: white;
				border-radius: 20rpx;
				padding: 65rpx;
				box-sizing: border-box;

				.newPassWord {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					// border: 1rpx solid red;
					.word {
						font-size: 24rpx;
						color: royalblue;
						text-align: center;
						line-height: 70rpx;
					}

					.line {
						height: 100%;
						width: 380rpx;
						border-bottom: 1rpx solid #F0EFF4;
					}
				}

				.tips {
					font-size: 22rpx;
					color: #9A9A9A;
					width: 100%;
					height: 130rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-bottom: 60rpx;
				}

				.button {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}
		}
	}
</style>